<template>
  <div className="app-container">
    <div className="table-container">
      <base-list
        ref="table"
        url="/cache"
        :options="options"
        :columns="columns"
        :format="format"
        :rules="rules"
        permission="ADMIN"
        @reloadOptions="handleGetOptions"
      >
        <template slot="header_actions" slot-scope="scope">
          <el-button v-waves type="danger" class="filter-button" icon="el-icon-list" @click="deleteByConditionVisible = true">正则删除</el-button>
        </template>
      </base-list>
      <el-drawer
        :visible.sync="deleteByConditionVisible"
        :destroy-on-close="true"
        :close-on-press-escape="false"
        :wrapper-closable="false"
        direction="rtl"
        :modal="false"
        :size="$store.state.app.device !== 'mobile' ? '60%' : '100%'"
      >
        <el-form ref="deleteByConditionData" label-width="auto" label-suffix=": " :model="kimiTemp" :rules="kimiExpandRules"
                 style="margin: 15px;">
          <el-form-item label="db" prop="db">
            <el-input-number v-model="deleteByConditionData.db" clearable/>
          </el-form-item>
          <el-form-item label="key" prop="key">
            <el-input v-model="deleteByConditionData.key" clearable/>
          </el-form-item>
          <el-form-item>
            <el-button
              v-waves
              type="danger"
              :loading="deleteByConditionLoading"
              @click="deleteByCondition()"
            >删除
            </el-button>
          </el-form-item>
        </el-form>
      </el-drawer>
    </div>
  </div>
</template>

<script>
import {getBaseList, getBaseOptions, requestBase} from '@/api/common'
import BaseList from '@/components/BaseList/index.vue'

export default {
  name: 'VipPrice',
  components: {BaseList},
  data() {
    return {
      deleteByConditionVisible: false,
      deleteByConditionData: {
        db: 1,
        key: '',
      },
      deleteByConditionLoading: false,
      columns: [
        {show: true, edit: true, width: 'auto',minWidth: '80', key: 'db', label: 'db', tooltip: 'db', type: 'NUMBER', queryable: true},
        {show: true, edit: true, width: 'auto',minWidth: '80', key: 'type', label: 'type', tooltip: 'type', type: 'WORD', optionKey: 'typeOptions',queryable: false},
        {show: true, edit: true, width: 'auto',minWidth: '500', key: 'key', label: 'key', tooltip: 'key', type: 'WORD',queryable: true},
        {show: true, edit: true, width: 'auto',minWidth: '500', key: 'value', label: 'value', tooltip: 'value', type: 'OBJECT'},
      ],
      format: {},
      rules: {
        add: {
          db: [{required: true, message: 'db必填!', trigger: 'blur'}],
          key: [{required: true, message: 'key必填!', trigger: 'blur'}],
          value: [{required: true, message: 'value必填!', trigger: 'blur'}],
        },
        edit: {
          db: [{required: true, message: 'db必填!', trigger: 'blur'}],
          key: [{required: true, message: 'key必填!', trigger: 'blur'}],
          value: [{required: true, message: 'value必填!', trigger: 'blur'}],
        }
      },
      options: {
        typeOptions: [
          {id: 'STRING', name: 'STRING'},
          {id: 'LIST', name: 'LIST'},
          {id: 'SET', name: 'SET'},
          {id: 'ZSET', name: 'ZSET'},
          {id: 'HASH', name: 'HASH'},
        ]
      }
    }
  },

  created() {
    this.handleGetOptions()
  },
  mounted() {
  },
  methods: {
    handleGetOptions() {
      const options = JSON.parse(localStorage.getItem('allOptions'))
      if (options) {
        this.options = Object.assign(this.options, options)
      }
    },
    deleteByCondition() {
      this.deleteByConditionLoading = true
      requestBase({url: '/cache/multi_by_condition', method: 'DELETE', data: this.deleteByConditionData}).then(res => {
        this.$notify.success('删除成功!')
        this.$refs.table.fetchData()
      }).finally(() => {
        this.deleteByConditionLoading = false
      })
    }
  }
}
</script>


